<!DOCTYPE html>
<html lang="en-US">
	<head>
		<meta charset="utf-8" />
		<title>Your first HTML form, styled</title>
		<style>
			body{
				/* Center the form on the page */
				text-align: center;
			}
			form {
				display: inline-block;
				/* Form outline */
				padding: 1em;
				border: 1px solid #ccc;
				border-radius: 1em;
			}

			p + p {
				margin-top: 1em;
			}

			label {
				/* Uniform size & alignment */
				display: inline-block;
				min-width: 90px;

				text-align: right;
			}

			input,
			textarea {
				/* To make sure that all text fields have the same font settings By default, textareas have a monospace font */
				font: 1em sans-serif;
				/* Uniform text field size */
				width: 300px;
				box-sizing: border-box;
				/* Match form field borders */
				border: 1px solid #999;
			}

			input:focus,
			textarea:focus {
				/* Set the outline width and style */
				outline-style: solid;
				/* To give a little highlight on active elements */
				outline-color: #000;
			}

			textarea {
				/* Align multiline text fields with their labels */
				vertical-align: top;
				/* Provide space to type some text */
				height: 5em;
			}

			.button {
				/* Align buttons with the text fields */
				padding-left: 90px;
				/* same size as the label elements */
			}

			button {
				/* This extra margin represent roughly the same space as the space between the labels and their text fields */
				margin-left: 0.5em;
			}
		</style>
	</head>

	<body>
		<form action="/my-handling-form-page" method="post">
			<p>
				<label for="name">Name:</label>
				<input type="text" id="name" name="user_name" />
			</p>
			<p>
				<label for="mail">E-mail:</label>
				<input type="email" id="mail" name="user_mail" />
			</p>
			<p>
				<label for="msg">Message:</label>
				<textarea id="msg" name="user_message"></textarea>
			</p>
			<p class="button">
				<button type="submit">Send your message</button>
			</p>
		</form>
	</body>
</html>
